<template>
	<view class="warning-control">
		<titleName :name="name" :backShow="true"></titleName>
		<view class="total">
			共<text>{{dataList.length}}</text>条数据
		</view>
		<view class="list">
			<NoData v-if="dataList.length==0" />
			<view class="item" @click="jumpDetail(item.id,item.colorlevel)" v-for="item in dataList" :key="item.id">
				<view
					:class="item.colorlevel==1?'one-color type':item.colorlevel==2?'two-color type':item.colorlevel==3?'three-color type':'type'">
					{{item.colorlevel==1?'红色预警（I级）':item.colorlevel==2?'橙色预警（II级）':item.colorlevel==3?'黄色预警（III级）':''}}
				</view>
				<view class="content">
					<view class="title">管控时间：{{item.monitortimestr}}</view>
					<view class="publisher">
						发布者：{{item.publisher}}
					</view>
					<view class="manage-time">
						<view class="time">
							发布时间：{{item.publishdate}}
						</view>
						<view class="detail">
							<view class="name">查看详情 </view>
							<image :src="resourceUrl+'right-arrow.png'" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import NoData from '../../components/noDataShow.vue'
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import {
		resourceUrl
	} from '../../request/config'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	let usertype = ref('')
	let detail = ref({})
	let fielNameList = ref([{}])
	let fielUrlList = ref([])
	let name = "预警管控"
	let dataList = ref([])
	let seltop = ref(1)
	let jumpDetail = (id, colorlevel) => {
		if (usertype.value == 9) {
			uni.navigateTo({
				url: `/homePageOther/warningcontroldetail/index?id=${id}&colorlevel=${colorlevel}`
			})
		} else {
			uni.navigateTo({
				url: `/homePageOther/enterprisewarningcontroldetail/index?id=${id}`
			})
		}

	}
	onLoad((e) => {
		usertype.value = uni.getStorageSync('usertype')

	})
	onShow(() => {
		if (usertype.value == 9) {
			http({
				url: "/greenAdmNotice/datalist",
				data: {
					noticetype: 9
				}
			}).then((res) => {
				if (res.code == 0) {
					dataList.value = res.data.list
				}
			})
		} else {
			http({
				url: "/greenNotice/datalist",
				data: {
					noticetype: 9
				}
			}).then((res) => {
				if (res.code == 0) {
					dataList.value = res.data.list
				}
			})
		}

	})
</script>

<style lang="scss" scoped>
	.warning-control {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.total {
			height: 63upx;
			padding-left: 52upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 23rpx;
			color: #333333;
			line-height: 63upx;
			background: #F3F5F7;

			text {
				color: #0874FA;
			}
		}


		.list {
			height: calc(100vh - 160upx - 63upx);
			background: #F3F5F7;
			overflow-y: scroll;
			padding: 0 36upx 36upx 36upx;

			.item:first-child {
				margin-top: 0upx !important;
			}

			.item {
				margin-top: 34upx;

				.type {
					width: 678rpx;
					height: 53rpx;

					border-radius: 14rpx 14rpx 0rpx 0rpx;
					line-height: 53upx;

					text-align: center;

					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;

				}

				.one-color {
					background: #FF0000
				}

				.two-color {
					background: #FF9000
				}

				.three-color {
					background: #FFCC00
				}

				.content {
					background-color: #fff;
					height: 241upx;
					padding-left: 34upx;
					padding-top: 30upx;

					.title {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 31rpx;
						color: #000000;


					}

					.publisher {
						margin-top: 30upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						margin-bottom: 26upx;
					}

					.manage-time {
						display: flex;
						align-items: center;
						height: 81upx;
						border-top: 1upx solid #EDEBEB;
						justify-content: space-between;
						padding-right: 37upx;

						.time {

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 25rpx;
							color: #666666;
							flex-grow: 1;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						.detail {
							display: flex;
							align-items: center;
							width: 140upx;
							flex-shrink: 0;

							.name {

								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 25rpx;
								color: #C1C0C0;

							}

							image {
								flex-shrink: 0;
								width: 12upx;
								height: 20upx;
								margin-left: 17upx;
							}
						}
					}
				}
			}
		}

	}
</style>